<!-- This is the main file for the project. On submit, it currently pops up an alert, but -->
<!-- you can change that by commenting and uncommenting the form tag toward the bottom -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript">
            /* Instead of having the form action go to another page, just show
             * the result. This is enabled or disabled by comment/uncommenting
             * out the html for the form tag below. */
            function showResult(){
                alert("This is the locationId submitted for " +
                    "that selection:\n\n\t " + getCheckedValue());
                return true;
            }

            /* Called from submit button onsubmit action to hidden field val */
            function setResult(){
                var check = getCheckedValue();
                if(check == "userEntry" && ! validateAddress()){
                    return false;
                }
                if(check == 'unchecked'){
                    alert("A Pickup or Delivery location must be chosen.");
                    return false;
                }else{
                    /* inject value into field */
                    document.getElementById("result").value = check;
                    return true;
                }
            }
            
            /* Called by setResult() to get the selected locationId. */
            function getCheckedValue(){
                var radios = document.getElementsByName("locationId");
                for(var c=0;c<radios.length;c++){
                    if(radios[c].checked){
                        return radios[c].value;
                    }
                }
                return 'unchecked';
            }
            
            /* Simulate validation with check for all text field values. */
            function validateAddress(){
                var accumStr = '';
                var elements = document.forms[0].elements;
                for(var e=0;e<elements.length;e++){
                    if(elements[e].type == "text"){
                        accumStr += elements[e].value;
                    }
                }
                if(accumStr == '' ){
                    alert("Delivery Address Validator:\n At least one of the fields needs some text.");
                  //showUserDiv();
                    document.getElementById("addressOne").focus();
                    return false;
                }else{
                    return true;
                }
            }

            /* Called by input tr html tag onclick actions to select rows */
            var lastRadio = 'uninit';
            var lastId = 'uninit';
            function select(radioNum, trId){
                if(radioNum !== null && radioNum !== lastRadio){
                    if(lastId !== 'uninit'){
                        document.getElementById(lastId).setAttribute("class", "plain");
                    }
                    document.getElementById(trId).setAttribute("class", "selected");
                    document.getElementById(radioNum).checked = true;
                    updateDiv(radioNum);
                    lastId = trId;
                    lastRadio = radioNum;
                }
            }
            
            /* Called by select() to switch out the map and user display areas*/
            function updateDiv(locId){
                // @ todo: use the js v3 geocoding pan to recenter on diff coords, not reload a different map
                var iframe2  = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=205147199833643296243.0004bcded293416715bcc&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;iwloc=0004bcdf4e039324ecd08&amp;ll=38.938138,-119.969258&amp;spn=0.060262,0.070255&amp;output=embed"></iframe><br />';
                var iframe35 = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=205147199833643296243.0004bcded293416715bcc&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;ll=38.934977,-119.998684&amp;spn=0.046735,0.072956&amp;z=13&amp;iwloc=0004bcdf4532eaad9d328&amp;output=embed"></iframe><br />';
                var iframe1  = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=205147199833643296243.0004bcded293416715bcc&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;ll=38.959275,-119.970875&amp;spn=0.064072,0.109863&amp;z=13&amp;iwloc=0004bcdf433d59c4e32fb&amp;output=embed"></iframe><br />';
                var iframe37 = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=205147199833643296243.0004bcded293416715bcc&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;ll=38.972622,-119.956112&amp;spn=0.04671,0.072956&amp;z=13&amp;iwloc=0004bcdf4134c412fb499&amp;output=embed"></iframe><br />';
                var iframe38 = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=205147199833643296243.0004bcded293416715bcc&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;ll=38.993839,-119.931221&amp;spn=0.046696,0.072956&amp;z=13&amp;iwloc=0004bcdf3d19184b05a89&amp;output=embed"></iframe><br />';
                switch(locId)
                {
                    case 2:
                        mapDiv.innerHTML = iframe2;
                        showMapDiv();
                        break;
                    case 35:
                        mapDiv.innerHTML = iframe35;
                        showMapDiv();
                        break;
                    case 1:
                        mapDiv.innerHTML = iframe1;
                        showMapDiv();
                        break;
                    case 37:
                        mapDiv.innerHTML = iframe37;
                        showMapDiv();
                        break;
                    case 38:
                        mapDiv.innerHTML = iframe38;
                        showMapDiv();
                        break;
                    default:// other radio ids like 'paypal' and 'userEntry'
                        hideAll();
                        // after this hideAll(), userEntry calls showUserDiv()
                        break;
                }
            }

            /* Switch to the mapDiv, hide the userDiv */
            function showMapDiv(){
                userDiv.setAttribute("class","hidden");
                mapDiv.setAttribute("class", "shown");
            }
            
            /* Switch to the userDiv, hide the mapDiv */
            function showUserDiv(){
                if(userDiv.getAttribute("class") == "hidden"){
                    userDiv.setAttribute("class","shown");
                    mapDiv.setAttribute("class", "hidden");
                    document.getElementById("addressOne").focus();
                }
            }
            
            /* Hide the userDiv and mapDiv */
            function hideAll(){
                mapDiv.setAttribute("class", "hidden");
                userDiv.setAttribute("class", "hidden");
            }
            
        </script>
        <style type="text/css">

            /* The selected and plain classes are switched out in select() */
            tr.selected {background:#9999FF;}
            tr.plain {background:#FFFFFF;}

            /* This is the entire highlight code. It specifies plain class
               so that the hightlighting does not obscure the selected color */
            tr.plain:hover td {background:#CCCCFF;}

            /* These are used to show/hide the divs in updateDivs() */
            div.shown{display:block;}
            div.hidden{display:none;}

            /* The rest are static style assignments */
            table, td, th
            {
                border-collapse:collapse;
                border:3px solid black;
                font-size:12px;
                font-family: Tahoma, sans-serif;
                padding:5px;
            }
            th
            {
                color:white;
                font-size:14px;
                background:#BBBBBB;
            }
            th.major
            {
                font-size:24px;
                font-weight:bold;
                background:gray;
            }
            #submit
            {
                font-size:20px;
                font-weight:bold;
                padding:7px;
            }

        </style>
    </head>
    <body> 
        <!--        <form id="DeliverForm" action="printGetParamsJS.html" onsubmit="return setResult();" method="get"> -->
        <!--        With action removed from the form, instead it is sent to showResult() to pop an alert. -->
        <!--        Comment out this line and uncomment the one above to change that. -->
        <form id="DeliverForm" onsubmit="return setResult() && showResult();">
            <br /><br />
            <table>
                <tr><th class="major" colspan="6">Pick Up - <small><small>click for map</small></small></th></tr>
                <tr><th>Choice</th><th>Street Address</th><th>City, State</th><th>Zip Code</th><th>Phone</th><th>Lat,Long</th></tr>
                <tr id="tr0" class="plain" onclick="select(2,'tr0');"><td><input id=2 type="radio" name="locationId" value=2 /></td><td>1168 Emerald Bay Road</td><td>South Lake Tahoe, CA</td><td>96150</td><td>(530) 544-1919</td><td>38.908007,-120.001418</td></tr>
                <tr id="tr1" class="plain" onclick="select(35,'tr1');"><td><input id=35 type="radio" name="locationId" value=35 /></td><td>1062 Emerald Bay Road</td><td>South Lake Tahoe, CA</td><td>96150</td><td>(530) 544-5500</td><td>38.912682,-120.004385</td></tr>
                <tr id="tr2" class="plain" onclick="select(1,'tr2');"><td><input id=1 type="radio" name="locationId" value=1 /></td><td>1034 Al Tahoe Boulevard</td><td>South Lake Tahoe, CA</td><td>96150</td><td>(530) 541-0401</td><td>38.934324,-119.974943</td></tr>
                <tr id="tr3" class="plain" onclick="select(37,'tr3');"><td><input id=37 type="radio" name="locationId" value=37 /></td><td>3599 Lake Tahoe Boulevard</td><td>South Lake Tahoe, CA</td><td>96150</td><td>(530) 541-7071</td><td>38.948049,-119.95897</td></tr>
                <tr id="tr4" class="plain" onclick="select(38,'tr4');"><td><input id=38 type="radio" name="locationId" value=38 /></td><td>209 Kingsbury Grade Road</td><td>Stateline, NV</td><td>89449</td><td>(775) 588-0442</td><td>38.968269,-119.93413</td></tr>
                <tr><th class="major" colspan="6">Delivery</th></tr>
                <tr id="tr5" class="plain" onclick="select('paypal', 'tr5');"><td><input id='paypal' type="radio" name="locationId" value='paypal' /></td><td colspan="5" >Set <b>CORRECT</b> delivery address when checking out with PayPal.</td></tr>
                <tr id="tr6" class="plain" onclick="select('userEntry','tr6'),showUserDiv();"><td><input id='userEntry' type="radio" name="locationId" value='userEntry' /></td>
                    <td colspan="5" > Click here to enter a delivery address.
                        <div id="userDiv" class="hidden">
                            <table>
                                <tr><td>Street Address</td><td><input type="text" name="streetaddress" id="addressOne" autocomplete="on" /></td></tr>
                                <tr><td>Apt,Unit,Room #</td><td><input type="text" name="streetaddresstwo" id="addressTwo" autocomplete="on" /></td></tr>
                                <tr><td>City, State</td><td><input type="text" name="citystate" id="City,State" autocomplete="on" /></td></tr>
                                <tr><td>Zip Code</td><td><input type="text" name="zipcode" autocomplete="on" /></td></tr>
                                <tr><td>Latitude</td><td><input type="text" name="latitude" id="Latitude" autocomplete="on"  /></td></tr>
                                <tr><td>Longitude</td><td><input type="text" name="longitude" id="Longitude" autocomplete="on" /></td></tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
            <input type="hidden" id="result" value="This value will be set by setResult()" />
            <input type="submit" id="submit" value="submit" />
            <br />
            <div id="mapDiv" class="hidden">
            </div>
        </form>
    </body>
</html>
